<template>
	<view class="container" v-if="listData">
		<zero-waterfall @onItem="onItem" :list="listData" ref="waterFall" v-if="activeBar != 2">
			<view class="box" v-for="(item, index) of listData" :key="index" slot="slot{{item.id}}">
				<view class="title">{{item.title}}</view>
				<view class="desc">
					<view class="font">
						<image style="width: 40rpx;height: 40rpx;border-radius: 50%;" :src="item.user_avatar" mode="">
						</image>
						<span class="name">{{item.nick_name}}</span>
					</view>
					<view class="views">
						<image style="width: 28rpx;height: 28rpx;" src="../../static/icon_show.png" mode="">
						</image>
						<span class="browse">{{item.browse}}</span>
					</view>
				</view>
			</view>
		</zero-waterfall>
		<cu-empty tips="这里什么也没有~" v-if="listData && listData.length == 0"></cu-empty>
		<u-loadmore v-else :status="refreshStatus" />
		<!-- <u-loadmore :status="status" /> -->
		<cu-button-wrap v-if="!isJoin">
			<u-button :customStyle="{width:'670rpx',height:'104rpx',borderRadius:'104rpx'}" type="primary" text="申请加入圈子"
				@click="onAddGroup"></u-button>
		</cu-button-wrap>
		<view>
			<u-popup :show="modalShow" mode="bottom" @close="onClose(0)">
				<view class="popup-wrap">
					<view class="popup-header">
						<text style="flex: 1;">发送加入圈子申请</text>
						<u-button shape="circle" :customStyle="{width:'176rpx',height:'64rpx',fontSize:'32rpx'}"
							type="primary" text="发送" @click="onClose(1)"></u-button>
					</view>
					<view class="content-box">
						<u--textarea :border="false" v-model="formData.reply_reaon" placeholder="请输入申请理由"></u--textarea>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import wContainer from '@/components/simple-waterfall/w-container.vue'
	import wItem from '@/components/simple-waterfall/w-item.vue'
	const iconShow = require('@/static/icon_show.png')
	import {
		mapState,
		mapActions
	} from 'vuex';
	import Refresh from '@/mixins/refresh'
	export default {
		mixins: [Refresh],
		components: {
			wContainer,
			wItem
		},
		data() {
			return {
				iconShow,
				modalShow: false, //加入弹窗
				columnNumber: 2,
				listData: null,
				formData: {
					id: '',
					reply_reaon: ''
				},
				isJoin: true
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onShow() {

		},
		onLoad(options) {
			if (options.id) {
				this.formData['id'] = options.id
			}
			this.getList(false);
			this.group_user_is_join();
		},

		destroyed() {

		},
		methods: {
			onItem(item) {
				this.$Jump.Open('/pages/index/postDetail?id=' + item.id)
			},
			// 申请加入圈子
			onClose(index) {
				if (index == 0) {
					this.modalShow = false;
					return
				}
				this.$Net.post(this.$api.group_join, this.formData, 1).then(res => {
					this.$Msg.Toast('申请成功')
					this.modalShow = false;
				})
			},
			// 加入圈子
			onAddGroup() {
				this.modalShow = true;
			},
			group_user_is_join() {
				this.$Net.get(this.$api.group_user_is_join + "/" + this.formData['id'], {}).then(res => {
					this.isJoin = res.flag;
				})
			},
			getList(status) {
				this.$Net.get(this.$api.group_list_post, {
					...this.searchReq,
					group_id: this.formData['id'],
				}).then(res => {
					let list = res.list.map(item => {
						// 没有图片就用视频的封面
						if (item.imgs) {
							item['url'] = item.imgs.split(",")[0];
						} else {
							item['url'] = item.cover
						}
						return item
					});
					this.setStatus(res.count, list, status);

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 16rpx;

		.box {
			background-color: #fff;
			// box-shadow: 3rpx 5rpx 57rpx 0px rgba(155, 131, 255, 0.2);
			// border-radius: 10rpx;
			// overflow: hidden;

			.title {
				padding: 0 12rpx;
			}

			.desc {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 12rpx;

				.font,
				.views {
					display: flex;
					align-items: center;
				}

				.name {
					color: #000;
					font-family: "PingFang SC";
					font-size: 26rpx;
					font-weight: 400;
					margin-left: 8rpx;
				}

				.browse {
					color: rgba(0, 0, 0, 0.60);
					font-family: "PingFang SC";
					font-size: 24rpx;
					font-weight: 400;
					margin-left: 12rpx;
				}
			}
		}

	}

	// .circle-list {
	// 	.item-box {
	// 		margin-bottom: 50rpx;
	// 		border-radius: 16px;
	// 		display: flex;
	// 		align-items: center;

	// 		.img-avatar {
	// 			width: 72rpx;
	// 			height: 72rpx;
	// 			margin-right: 28rpx;
	// 			border-radius: 32rpx;
	// 		}

	// 		
	// 	}
	// }

	.popup-header {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 20rpx;
		width: 100%;
	}

	::v-deep .u-popup__content {
		border-radius: 20px !important;
	}

	.content-box {
		padding: 0 40rpx;
		margin-bottom: calc(40rpx + constant(safe-area-inset-top));
		margin-bottom: calc(40rpx + env(safe-area-inset-top));

		::v-deep .u-textarea {
			border-radius: 24rpx;
			background: #F1F1F1;
		}
	}
</style>